<template>
  <div class="maintain_state">
    <span class="block_label_color small_label" :class="maintainStatusColor">{{data.maintainStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'MaintainStatus',
  props: {
    data: Object
  },
  computed: {
    // 根据保养状态返回相应class
    maintainStatusColor() {
      switch (this.data.maintainStatusValue) {
        case 'InProcessing':
          // 保养中
          return 'state_inProcessing'
        case 'Finished':
          // 已保养
          return 'state_finished'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 保养状态颜色 */
  // 保养中
  @stateInProcessing: #00b4ff;
  // 已保养
  @stateFinished: #7e8e9f;
  .maintain_state{
    .block_label_color{
      /*保养状态*/
      // 保养中
      &.state_inProcessing{
        background-color: @stateInProcessing;
      }
      // 已保养
      &.state_finished{
        background-color: @stateFinished;
      }
    }
  }
</style>
